<template>
  <div class="wss-container">
    <div class="agreemt-box">
      <el-row :gutter="30">
        <el-col :span="6">
          <ComSidebar
            activeIndex="0"
            @Event-blurInput="blurInput"
            title="选择协议"
            @EventSelectSbider="selectSbider"
            :sidebarArr="agreementArr"
          ></ComSidebar>
        </el-col>

        <el-col key="1" :span="18">
          <div class="contentMain">
            <NewCard :isright="true" title="编辑">
              <template #right>
                <el-button
                  v-hasPermi="['doc:richText:edit']"
                  @click="save"
                  size="mini"
                  type="primary"
                  >保存</el-button
                >
              </template>
              <WangEditor
                key="1"
                ref="wangEditor"
                :list="currentContent"
              ></WangEditor>
            </NewCard>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import NewCard from "../../../components/newCard.vue";

// 协议类型
// import { agreementArr } from "@/wss/utils/wss.js";
import ComSidebar from "../../../components/ComSidebar.vue";
import WangEditor from "../../../components/wangEditor.vue";
import {
  getRichTextediEApi,
  getRichTextlistTitleApi,
} from "@/wss/newApi_3-24/doc/richText.js";
import ComGetLaw from "../../../components/ComGetLaw.vue";
import { getRichTextAddApi } from "@/wss/newApi_3-24/doc/richText.js";
export default {
  components: { NewCard, ComSidebar, WangEditor, ComGetLaw },

  data() {
    return {
      //参数
      params: {
        id: "",
        // Long	Y	来源
        type: "",
        // string	N	类型 1 专家宝典 2 商务宝典 3 ios隐私协议 4 ios用户协议 5 pc隐私协议 6 pc用户协议 7 安卓隐私协议 8 安卓用户协议 9 小程序隐私协议 10 小程序用户协议 11免责声明 12购买须知 13认证说明
        title: "",
        // string	N	标题
        content: "",
        // string	N	内容
        status: "0",
        // string	N	状态 0运行 1停止
      },
      // 当亲协议的内容
      currentContent: [],
      // 当前的类型
      currentType: "",
      // 协议类型
      agreementArr: [],
      // 协议列表查询参数
      pageing: {
        pageNum: 1,
        // string	Y	页号
        pageSize: 20,
        // "string	Y	大小"
        type: null,
        // "string	N	类型 1 专家宝典 2 商务宝典 3 ios隐私协议 4 ios用户协议 5 pc隐私协议 6 pc用户协议 7 安卓隐私协议 8 安卓用户协议 9 小程序隐私协议 10 小程序用户协议 11免责声明 12购买须知 13认证说明"
        status: 0,
        // string	N	状态 正常 1停用"
      },
    };
  },
  created() {
    this.getRichTextListFn();
  },
  methods: {
    async blurInput(val) {
      let body = {
        type: this.agreementArr.length,
        // string	Y	类型 1 专家宝典 2 商务宝典 3 ios隐私协议 4 ios用户协议 5 pc隐私协议 6 pc用户协议 7 安卓隐私协议 8 安卓用户协议 9 小程序隐私协议 10 小程序用户协议 11免责声明 12购买须知 13认证说明
        status: "0",
        // string	Y	状态 0正常 1停止
        title: val,
        // string	Y	标题
        content: "",
        // string	N	文本内容
      };
      let { code, msg } = await getRichTextAddApi(body);
      if (code != 200) return;
      this.$message({
        type: "success",
        message: msg,
      });
      this.getRichTextListFn();
    },
    // 保存
    async save() {
      const _this = this;
      // let num = this.num++;
      let content = _this.$refs.wangEditor.getEditorDataFn();
      _this.params.content = content;
      console.log(_this.params);
      let { code, msg } = await getRichTextediEApi(_this.params);
      if (code != 200) return;
      this.$message({
        type: "success",
        message: msg,
      });
    },
    async getRichTextListFn() {
      const _this = this;

      let {
        code,
        data: { rows },
      } = await getRichTextlistTitleApi(_this.pageing);

      if (code != 200) return;
      _this.agreementArr = JSON.parse(JSON.stringify(rows));
      this.selectSbider(_this.agreementArr[0]);
    },
    // 侧边栏选中的
    selectSbider(item) {
      const _this = this;
      console.log(item);
      _this.params = item;

      _this.currentContent = [item.content];
    },

    selectActive(row) {
      console.log(row);
    },
    handleSelect() {},
  },
};
</script>

<style lang="scss" scoped>
.agreemt-box {
  height: 100%;
  .contentMain {
    flex: 1;
    height: 100%;
    width: 100%;
  }
  .el-row {
    height: 100%;
    margin-bottom: 0;
    .el-col {
      height: 100%;
    }
  }
}
::v-deep .el-col > div {
  height: 100%;
}
::v-deep .el-card__body {
  padding-bottom: 0px;
}
::v-deep .w-e-text > * {
  width: 100%;
}
::v-deep .el-card {
  height: 100%;
  width: 100%;
}
::v-deep #wangEditor-1 {
  height: 100%;
}
::v-deep .el-card__body {
  height: 100%;
}
::v-deep .el-card__body > div {
  width: 100%;
  height: 92%;
}
::v-deep .el-card__body > div #div1 {
  height: 100%;
}
::v-deep .el-card__body > div #div1 .w-e-text-container {
  height: 80% !important;
}
::v-deep .w-e-text-container {
  // border: unset !important;
}
</style>